<template>
<div>
    <div class="header">
        <h2 class="header_title">V-KOOL PPF<span>报价</span>查询系统</h2>
        <div class="header_subtitle">请输入车型，查询<span>威固车衣</span>的报价信息。</div>
        <div style="header_select">
            <el-form>
                <el-row :gutter="5" type="flex" class="row-bg" justify="center">
                    <el-col :span="6">
                         <el-select
                            filterable
                            clearable
                            v-model="ruleForm.brandval"
                            placeholder="请选择车辆品牌"
                            @change="brandChange">
                                <el-option
                                    v-for="item in brandOption"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.id">
                                </el-option>
                        </el-select>
                    </el-col>
                    <el-col :span="9">
                        <el-select
                            filterable
                            clearable
                            v-model="ruleForm.brandLevel"
                            placeholder="请选择车辆型号">
                                <el-option
                                    v-for="item in brandOptionLevel"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.id">
                                </el-option>
                        </el-select>
                    </el-col>
                </el-row>
                <el-row :gutter="5" type="flex" class="row-bg" justify="center">
                     <el-col :span="6">
                        <el-select v-model="ruleForm.year" placeholder="请选择年份" @change="yearChange" clearable >
                            <el-option
                            v-for="item in years"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id">
                            </el-option>
                        </el-select>
                    </el-col>
                    <el-col :span="9">
                        <el-select v-model="ruleForm.productModel" placeholder="请选择产品型号" @change="productModelChange" clearable>
                            <el-option
                            v-for="item in productModel"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id">
                            </el-option>
                        </el-select>
                        <el-button type="primary" icon="el-icon-search" class="button" @click="selectChange">搜索</el-button>
                    </el-col>

                </el-row>
            </el-form>
        </div>
    </div>

    <div class="container_content" v-if="site.length > 0">
        <div class="title">
            {{brand.brand_name}} {{brand.brand_model_name}} <span> V-KOOL PPF {{brand.product_model_name}} </span> 报价信息
        </div>
        <div class="content" >
            <div class="left">
                <div class="img">
                    <img
                    v-if="brand.cover !== ''"
                    :src="brand.cover">
                </div>
                <p class="left_title">
                    V-KOOL PPF 报价
                </p>
                <p class="amount">
                    {{amount}} <span>元</span>
                </p>
                <p class="subAmout">
                    当前所选部位金额
                </p>
            </div>
            <div class="right">
                <div class="list">
                    <span v-for="item in site" :key="item.id">
                        <el-button
                            v-if="item.isChecked"
                            @click="buttonClick(item.id,0)"
                            type="success"
                            size="mini"
                            class="button_left"
                            icon="el-icon-check">
                            {{item.name}}
                        </el-button>
                        <el-button
                            v-else
                            @click="buttonClick(item.id, 1)"
                            type="info"
                            size="mini"
                            class="button_left"
                            icon="el-icon-close">
                                {{item.name}}
                        </el-button>
                    </span>




                </div>
                <div>
                    <table class="table">
                        <col style="width:30%">
                        <col style="width:30%">
                        <col style="width:30%" algin="right">
                        <tr v-for="item in site" :key="item.id">
                            <td>{{item.name}}</td>
                            <td>{{item.amount}}</td>
                            <td class="table_img">
                                <img
                                    v-if="item.cover !== ''"
                                    :src="item.cover">
                            </td>
                        </tr>

                    </table>

                </div>
            </div>
        </div>
    </div>
    <div class="container_content" v-else style="text-align:center;color:#fff;padding-top:20px"> 暂无数据 </div>
    <div v-loading.fullscreen.lock="fullscreenLoading"></div>
</div>
</template>

<script>
//const baseUrl = 'http://xy.local.com';
const baseUrl = 'http://bjht.cymtm.com';
export default {
    name: 'index',
    data(){
        return{
            ruleForm: {
                brandval:'',
                brandLevel:'',
                year:'',
                productModel:''
            },
            fullscreenLoading: false,
            brandOption:[],
            brandOptionLevel:[],
            productModel:[],
            years:[],
            brand:[],
            site:[],
            amount:''
        }
    },
    methods:{
        getBrand(){
            this.fullscreenLoading = true;
            let url = baseUrl + '/api/home?type=2';
            let _this = this;
            this.http.get(url).then( res => {
                res = res.data;
                this.fullscreenLoading = false;
                if (res.code === 0) {
                    _this.brandOption = res.data.brand ;
                    _this.years = res.data.year;
                    _this.productModel = res.data.product_model;
                } else {
                    this.$message.error(res.message);
                }
            });
        },
        selectChange(){
            let str = '?brand_id='+ this.ruleForm.brandval +
                     '&brand_model_id=' + this.ruleForm.brandLevel +
                     '&year=' + this.ruleForm.year +
                     '&product_model=' + this.ruleForm.productModel;

            let url = baseUrl + '/api/product' + str;
            this.fullscreenLoading = true;
            this.http.get(url).then( res => {
                res = res.data;
                this.fullscreenLoading = false;
                if (res.code === 0) {
                    this.site = res.data.site || [];
                    this.brand = res.data;
                    this.amountCalculate();
                } else {
                    this.$message.error(res.message);
                }
            });
        },
        brandChange(){
            let id = this.ruleForm.brandval;
            this.fullscreenLoading = true;
            let url = baseUrl + '/api/brand/' + id;
            let _this = this;
            this.http.get(url).then( res => {
                res = res.data;
                this.fullscreenLoading = false;
                _this.brandOptionLevel = [];
                _this.ruleForm.brandLevel = '';
                if (res.code === 0) {
                    _this.brandOptionLevel = res.data;
                } else {
                    this.$message.error(res.message);
                }
            });

        },
        buttonClick(id, val){
            this.site.forEach(item => {
                if (item.id == id) {
                    item.isChecked = val;
                }
            });
            this.amountCalculate();
        },
        amountCalculate(){
            let amount = 0;
            this.site.forEach(item => {
                if (item.isChecked) {
                    amount += parseFloat(item.amount,2);
                }
            });
            this.amount = amount;
        },
        yearChange(a){
            this.ruleForm.year = a;
        },
        productModelChange(a){
            this.ruleForm.productModel = a;
        }
    },
    created(){
        this.getBrand();
    }

}
</script>

<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
.row-bg{
    margin-top: 10px;
}
.header{
    background: #202020;
    border-color: #303030;
    height: 260px;
    padding-top: 3em;
}
.header_title{
    color: #cccccc;
    font-weight: 200;
    margin: 0;
    text-align: center;
    font-size: 2em;
}
.header_title span,.header_subtitle span,.title span{
    color: #C8B88C;
}
.header_subtitle{
    color: #999999;
    text-align: center;
    line-height: 200%;
}
.demo-ruleForm{
    text-align: center;
    margin-top:2em;
}
.content{
    display: flex;
    padding: 10px 50px;
    justify-content:center;
}
.left, .right{
    width: 50%;
}
.img {
    width: 80%;
    text-align: center;
}
.img img{
    width: 100%;
    text-align: center;
}
.left_title{
    text-align: center;
    color: #ffffff;
}
.amount{
    text-align: center;
    color: #C8B88C;
    font-weight: 800;

}
.title{
    text-align: center;
    font-weight: 400;
    color: #ccc;
    line-height: 300%;
}
.subAmout{
    text-align: center;
    color: #fff;
}
.table_img {
    height: 50px;
}
.table_img img{
    max-width: 50%;
    max-height: 40px;
}


.table > tr > td{
    color: #999;
    background: #222;
    border-color: #303030;
    text-align: center;
    width: 150px;
}

.table > tr:nth-child(2n+1) > td {
    background: #5a3636;
}
.button{
    margin-left: 10px;
}
.list{
    padding-top: 10px;
    padding-bottom:20px ;
}
.button_left{
    margin-left: 10px;
}
</style>
